<template>
    <div v-loading="loading">
        <el-dialog :visible.sync="visible" :title="type == 'create' ? '添加银行' : '修改银行'" width="800px">
            <el-form :model="form" label-width="120px">
                <el-form-item label="选择银行">
                    <el-select placeholder="选择银行" v-model="form.bank_code" style="width: 500px" @change="selectFun">
                        <el-option :key="index" :label="item.name" :value="item.bank_code"
                            v-for="(item, index) in typeList"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="卡号">
                    <el-input placeholder="请输入卡号" type="number" style="width: 500px" v-model="form.card_number"></el-input>
                </el-form-item>

                <el-form-item label="开户行">
                    <el-input placeholder="请输入开户行" style="width: 500px" v-model="form.opening_bank"></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                    <el-input placeholder="请输入手机号" style="width: 500px" :maxlength="11" v-model="form.phone"></el-input>
                </el-form-item>

            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-button @click="toForm()" size="small" style="width: 150px" type="success">添加</el-button>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="440px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="代理ID" prop="agent_id"></el-table-column>
                <el-table-column label=" 银行名称" prop="bank_info.name"></el-table-column>

                <el-table-column label="图标" prop="bank_info">
                    <template slot-scope="scope">

                        <el-image class="border" style="width: 50px; height: 50px" :src="scope.row.bank_info.icon"
                            :preview-src-list="toArray(scope.row.bank_info.icon)">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column label="银行编号" prop="bank_code"></el-table-column>

                <el-table-column label="默认" prop="default"></el-table-column>

                <el-table-column label="开户行" prop="opening_bank"></el-table-column>


                <el-table-column label="卡号" prop="card_number"></el-table-column>

                <el-table-column label="手机号" prop="phone"></el-table-column>
                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" type="primary"
                            style="padding: 10px">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" type="danger" style="padding: 10px">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

    </div>
</template>
      
<script>
export default {
    components: {

    },
    data() {
        return {
            query: {
                name: "",
                label_status: ""
            },
            form: {
                bank_code: '',
                card_number: '',
                opening_bank: '',
                phone: ''
            },
            visible: false,
            loading: false,
            data: [],
            type: 'create',
            typeList: [],
            id:'',
            submitComplete:false
        }
    },
    mounted() {
        this.getDataList()
        this.getBankList()
    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },

        getDataList() {
            let that = this
            this.$request.get('/bank/index').then((res) => {
                console.log('getDataList', res)
                that.data = res
            })
        },


        getBankList() {
            let that = this
            this.$request.get('/bank/bank_list').then((res) => {
                console.log('getBankList', res)
                that.typeList = res
            })
        },


        del(id) {
            this.$request.del('/bank/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.getDataList() //重新请求数据
            })
        },



        toForm(form = null) {
            this.visible = true //打开弹出框
            if (form != null) {
                this.type = 'update'
                this.id = form.id
                this.form.bank_code = form.bank_code,
                this.form.card_number = form.card_number,
                this.form.opening_bank = form.opening_bank,
                this.form.phone = form.phone
            } else {
                this.type = 'create'
                this.worksId = ""
                this.form = {
                    bank_code: '',
                    card_number: '',
                    opening_bank: '',
                    phone: ''
                }
            }
        },

        closeBox() {
            this.type = 'create'
            this.visible = false
            this.form = {
                bank_code: '',
                card_number: '',
                opening_bank: '',
                phone: ''
            }
        },

        selectFun(val) {
            //console.log(val)
            // const resultArr = Object.entries(this.typeList).filter((i) => i.includes(val));
            // this.form.bank_code = resultArr[0][0]
            // console.log("resultArr", resultArr)
        },

        //提交
        submit() {
            if (this.submitComplete) return
            this.submitComplete = true
            if (!(this.form.bank_code && this.form.card_number && this.form.opening_bank && this.form.phone)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }
            if (this.type == 'create') {
                this.$request.post('/bank/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.submitComplete = false
                    this.getDataList() //重新请求数据
                    this.closeBox()

                }).catch((error)=>{
                this.submitComplete = false
                });
            } else {
                this.$request.put('/bank/update/' + this.id,this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.submitComplete = false
                    this.getDataList() //重新请求数据
                    this.closeBox()
                }).catch((error)=>{
                this.submitComplete = false
                });
            }
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>